<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>购物车</title>
		<meta http-equiv="pragma" content="no-cache"> 
	    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate"> 
	    <meta http-equiv="expires" content="0">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<link rel="stylesheet" href="../css/mui.min.css" />
		<link rel="stylesheet" href="../css/common.css" />
	</head>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		body {
			background-color: #F3F3F3;
		}
	    /*购物车*/
	   	.shop-name{background:#fff;height:35px;line-height:35px;padding:0 15px;position:relative;}
		.shop-name h4{float:left;font-size:14px;margin-left: 28px; color: #555555;line-height: 25px;}
		.shop-name h4 a{color: #666;}
		.shopping{margin-top: 44px; margin-bottom: 30px; clear:both;overflow:hidden;height:auto;background-color: #F3F3F3;}
		.shopping .shop-group-tips-div{display: none; font-size:15px; color: #e38028; font-family: "PingFang-SC-Regular"; text-align: center; margin-top: 40px;}
		.shop-group-item{margin-bottom:5px;}
		.shop-group-item ul li{border-bottom:1px solid #C5C5C5;list-style: none;}
		.shop-group-item ul li:last-child{border-bottom:none;}
		
		input[type="checkbox"]{-webkit-appearance:none;outline: none;border-width: 0px;}
		input.check{background:url(../img/goods/select_norm_icon.png) no-repeat center left;background-size:20px 20px;position:absolute;top:50%;left:10px;margin-top:-18px;width:20px;height:35px;}
		input.check:checked{background:url(../img/goods/selected_icon.png) no-repeat center left;background-size:20px 20px;}
		input.goodsCheck:checked{background:url(../img/goods/selected_icon.png) no-repeat center left;background-size:20px 20px;}
		input.check:checked{background:url(../img/goods/selected_icon.png) no-repeat center left;background-size:20px 20px;}
		.checked{background:url(../img/goods/selected_icon.png) no-repeat left center;background-size:20px 20px;position:absolute;top:50%;left:15px;margin-top:-18px;width:20px;height:35px;}
		
		.shop-info{background:#FFFFFF;height:120px;padding:0 15px;position:relative;}
		/*.shop-info .checkbox{background:url(../img/goods/select_norm_icon.png) no-repeat left center;background-size:20px 20px;position:absolute;top:50%;left:15px;margin-top:-60px;width:20px;height:120px;}
		.shop-info .checkbox1{background:url(../img/goods/selected_icon.png) no-repeat left center;background-size:20px 20px;position:absolute;top:50%;left:15px;margin-top:-60px;width:20px;height:120px;}*/
		.shop-info .shop-info-img{position:absolute;top:15px;left:45px;width:90px;height:90px;}
		.shop-info .shop-info-img img{width:100%;height:100%;}
		.shop-info .shop-info-hide{display: none;}
		.shop-info .shooping-cart-ID{display: none;}
		.shop-info .shop-info-text{margin-left:130px; padding:25px 0;}
		.shop-info .shop-info-text .goods-name{font-size:15px; color: #555555; font-family: "PingFang-SC-Regular"; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow: hidden;}
		.shop-info .shop-info-text .shop-brief{height:25px;line-height:25px;font-size:12px;color:#B1B1B1;white-space:nowrap;font-family: "PingFang-SC-Regular";}
		.shop-info .shop-info-text .shop-brief span{display:inline-block;margin-right:8px;}
		.shop-info .shop-info-text .shop-price{height:24px;line-height:24px;position:relative;}
		.shop-info .shop-info-text .shop-price .shop-pices {color:#DC5E5D;font-size:10px;}
		.shop-info .shop-info-text .shop-price .shop-pices .price {color:#DC5E5D;font-size:14px;}
		.shop-info .shop-info-text .shop-arithmetic{position:absolute;right:0px;top:0;width:84px;box-sizing:border-box;white-space:nowrap;height:100%;}
		.shop-info .shop-info-text .shop-arithmetic a{display:inline-block;width:23px;height:22px;line-height:22px;text-align:center;background:#fff;font-size:16px;}
		.shop-info .shop-info-text .shop-arithmetic .minus{display: inline-block; background-image: url(../img/goods/btn_jian.png); background-size: 100% 100%; width: 25px; height: 23px;}
		.shop-info .shop-info-text .shop-arithmetic .failed{color:#d1d1d1;}
		.shop-info .shop-info-text .shop-arithmetic .plus{display: inline-block;  background-image: url(../img/goods/btn_jia.png); background-size: 100% 100%; width: 25px; height: 23px;}
		.shop-info .shop-info-text .shop-arithmetic .minus:active{display: inline-block; background-image: url(../img/goods/btn_jian_w.png); background-size: 100% 100%; width: 25px; height: 23px;}
		.shop-info .shop-info-text .shop-arithmetic .plus:active{display: inline-block;  background-image: url(../img/goods/btn_jia_w.png); background-size: 100% 100%; width: 25px; height: 23px;}
		.shop-info .shop-info-text .shop-arithmetic .num{width:32px;text-align:center;border:none;display: inline-block;height:100%;box-sizing:border-box;vertical-align:top;margin:0 -6px;}
		.shop-info .delete-div {display: none; width: 45px; height: 120px; background-color: #013662; position: absolute; top: 0px; right: 0px; font-size: 13px; color: #FFFFFF; font-family: "PingFang-SC-Regular"; line-height: 120px; text-align: center;}
		
		.payment-bar{clear:both;overflow:hidden;width:100%;height:49px;position:fixed;bottom:0;border-top:1px solid #e0e0e0;background:#fff;}
		.payment-bar .all-checkbox{float:left;line-height:49px;padding-left:40px;font-size: 13px; color: #737373; font-family: "PingFang-SC-Regular";}
		.payment-bar .shop-total{display: block; float:left;-webkit-box-flex:1.0;box-flex:1.0;margin:14px 20px 9px 35px;}
		.payment-bar .shop-total div{display:block;font-size:13px; color: #737373; font-family: "PingFang-SC-Regular";}
		.payment-bar .settlement{display:inline-block;float:right;width:100px;height:49px;line-height:49px;text-align:center;color:#fff;font-family: "PingFang-SC-Regular"; font-size:15px;background:#013662;}
		.payment-bar .collection-div{display: none; float:right;-webkit-box-flex:1.0;box-flex:1.0;width:120px;height:49px;line-height:49px;text-align:center;color:#fff;font-family: "PingFang-SC-Regular"; font-size:15px;background:#d10b38;}
		.special-div {
			margin-bottom: 50px;
		}
		.special-title {
			font-size: 14px;
			color: #444444;
		    text-align: center;
			font-family: "PingFang-SC-Regular";
		}
		.goods-ID-hide, .merchant-ID-hide {
			display: none;
		}
		.common-back-div {
			bottom: 45px;
		}
	</style>
	<body>
		<header style="background-color:#013662;" class="mui-bar mui-bar-nav">
			<h1 style="color: #FFFFFF; font-size: 14px; font-family: "PingFang-SC-Regular";" class="mui-title">购物车</h1>
			<div class="mui-pull-right" style="margin-top: 12px;"><img style="width: 20px;" src="../img/goods/edit_icon.png" /></div>
		</header>
		<div class="shopping">
			<div class="shop-group-item">
				<ul>
					<!--<li>
						<div class="shop-name">
							<input type="checkbox" class="check goods-check shopCheck">
							<h4><a href="#">苹果专卖店</a></h4>
						</div>
						<div class="shop-info">
							<input type="checkbox" class="check goods-check goodsCheck">
							<div class="shop-info-img"><a href="#"><img src="../img/index/tuijian_bg.png" /></a></div>
							<div class="shop-info-text">
								<div>Apple MacBook Pro 13.3英寸笔记本电脑 银色(Core i5 处理器/8GB内存/128GB SSD闪存/Retina屏 MF839CH/A)</div>
								<div class="shop-brief"><span>重量:3.3kg 颜色:标配版 版本:13.3英寸</span></div>
								<div class="shop-price">
									<div class="shop-pices">￥<span class="price">10021.00</span></div>
									<div class="shop-arithmetic">
										<div class="minus"></div>
										<span class="num" >1</span>
										<div class="plus"></div>
									</div>
								</div>
							</div>
							<div class="delete-div">删除</div>
						</div>
					</li>-->
				</ul>
			</div>
			<div class="shop-group-tips-div">购物车空空如也，快去选购吧。。。</div>
		</div>
		<div class="special-div">
			<div class="special-title">小U推荐</div>
			<ul id="specialul" class="mui-table-view mui-grid-view">
		        <!--<li class="mui-table-view-cell mui-media mui-col-xs-6">
	                <div class="mui-media-object">
	                		<img class="special-image" src="../img/index/tuijian_bg.png" />
	                		<div class="special-info-div">
	                			<div class="special-text">夹心蒸蛋糕</div>
	                			<div class="special-collect-div">
	                				<img class="collect-icon" src="../img/index/chihuo_icon.png" />
	                				<span class="collect-span">333人</span>
	                			</div>
	                		</div>
	                		<div class="special-info-div">
	                			<div class="special-price">25.80¥</div>
	                			<div class="add-shopping-car-div"></div>
	                		</div>
	                	</div>
		        </li>-->
		    </ul>
		</div>
		<div class="payment-bar">
			<div class="all-checkbox"><input type="checkbox" class="check goods-check" id="AllCheck">全选</div>
			<div class="shop-total">
				<div>总价：<i class="total" id="AllTotal">0.00</i></div>
			</div>
			<div class="settlement">结算</div>
			<!--<div class="collection-div">移到收藏夹</div>-->
		</div>
		<div class="common-back-div">
			<img class="common-back-img" src="../img/common/public_back.png" />
		</div>
	</body>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/swiper.min.js" ></script>
	<script type="text/javascript" src="../js/utils/boot.js" ></script>
	<script>
		var userID = base.getParameter("userID");
		var merchantID = base.getParameter("merchantID");
		var elementID = null;
		var isEdit = false;
	    $(function(){
		    getShoppingCart();
			getPushingGoods();
		});
		function getShoppingCart() {
			var url = base.url.getShoppingCart;
			var data = {
				userID: userID
			}
			base.postData(url,data,getShoppingCartSuccess);
		}
		// 数量减
		$(".shop-group-item").on('tap','.minus',function(){
			var t = $(this).parent().find('.num');
			t.text(parseInt(t.text()) - 1);
			if (t.text() <= 1) {
				t.text(1);
			}
			totalPrice();
		});
		// 数量加
	  	$(".shop-group-item").on('tap','.plus',function(){
			var t = $(this).parent().find('.num');
			var isSeckill = $(this).closest(".shop-info").find("input[name='isSeckill']").val();
			var seckillNum = $(this).closest(".shop-info").find("input[name='seckillNum']").val();
			if (isSeckill == 1 && t.text() >= seckillNum) {
				t.text(seckillNum);
				mui.toast("已达到该宝贝购买上限");
				return;
			}
			t.text(parseInt(t.text()) + 1);
			if (t.text() <= 1) {
				t.text(1);
			}
			totalPrice();
		});
		// 点击店铺按钮
		$(".shop-group-item").on('change','.shopCheck',function(){
			if ($(this).prop("checked") == true) { //如果店铺按钮被选中
				$(this).parents("li").find(".goods-check").prop('checked', true); //店铺内的所有商品按钮也被选中
				if ($(".shopCheck").length == $(".shopCheck:checked").length) { //如果店铺被选中的数量等于所有店铺的数量
					$("#AllCheck").prop('checked', true); //全选按钮被选中
					totalPrice();
				} else {
					$("#AllCheck").prop('checked', false); //else全选按钮不被选中
					totalPrice();
				}
			} else { //如果店铺按钮不被选中
				$(this).parents("li").find(".goods-check").prop('checked', false); //店铺内的所有商品也不被全选
				$("#AllCheck").prop('checked', false); //全选按钮也不被选中
				totalPrice();
			}
		});
		// 勾选商品
	  	$(".shop-group-item").on('change','.goodsCheck',function(){
		    var goods = $(this).closest(".goods-ul").find(".goodsCheck"); //获取本购物车的所有商品
		    var goodsC = $(this).closest(".goods-ul").find(".goodsCheck:checked"); //获取本购物车所有被选中的商品
		    var shops = $(this).closest(".shop-li").find(".shopCheck"); //获取本店铺的全选按钮
		    if (goods.length == goodsC.length) { //如果选中的商品等于所有商品
		    		shops.prop('checked', true); //店铺全选按钮被选中
		    		if ($(".shopCheck").length == $(".shopCheck:checked").length) { //如果店铺被选中的数量等于所有店铺的数量
			        $("#AllCheck").prop('checked', true); //全选按钮被选中
			        totalPrice();
			    } else {
			        $("#AllCheck").prop('checked', false); //else全选按钮不被选中 
			        totalPrice();
			    }
		    } else { //如果选中的商品不等于所有商品
		    		shops.prop('checked', false); //店铺全选按钮不被选中
		      	$("#AllCheck").prop('checked', false); //全选按钮也不被选中
		      	// 计算
		      	totalPrice();
		    }
		 });
		// 点击全选按钮
		$("#AllCheck").click(function() {
		    if ($(this).prop("checked") == true) { //如果全选按钮被选中
		      $(".goods-check").prop('checked', true); //所有按钮都被选中
		      totalPrice();
		    } else {
		      $(".goods-check").prop('checked', false); //else所有按钮不全选
		      totalPrice();
		    }
		});
		$(".shop-group-item").on('tap','.delete-div',function(){
	  		var shoopingCartID = $(this).closest(".shop-info").find(".shooping-cart-ID").text();
	  		elementID = $(this);
	  		delShoppingCart(0, shoopingCartID);//删除购物车中单个商品
		});
		$(".payment-bar").on('tap','.settlement',function(){
			if ($("#AllTotal").text() <= 0) { //用勾选的总价来判断是否勾选了商品
				mui.toast(isEdit?"请勾选删除的商品":"请勾选要购买的商品");
				return;
			}
			var _shoopingCartIDStr = "";
			var goodsStandardList = [];
			var _totalNum = 0;
			var isSeckill = "";
			var seckillID = "";
			$(".shop-group-item").find(".goodsCheck").each(function(){
				if ($(this).is(":checked")) { //如果该商品被选中
					var shoopingCartID = $(this).closest(".shop-info").find(".shooping-cart-ID").text();
					if(isEdit) {
						_shoopingCartIDStr+=shoopingCartID;
						_shoopingCartIDStr+=",";
//						$(this).parent().parents("li").remove(); 
//						totalPrice();
					} else {
						var standardID = $(this).closest(".shop-info").find(".standard-ID").text(); //规格ID
						var goodsID = $(this).closest(".shop-info").find(".goods-ID").text(); //商品ID
						var num = parseInt($(this).closest(".shop-info").find(".num").text()); //得到商品的数量
						var price = parseFloat($(this).parents(".shop-info").find(".price").text()); //得到商品的单价
						var goodsImg = $(this).parents(".shop-info").find(".shop-info-img img").attr("src"); //得到商品的单价
						var goodsName = $(this).closest(".shop-info").find(".goods-name").text(); //商品名称
						var standard = $(this).closest(".shop-info").find(".shop-brief .standard-span").text()||"该商品没有规格"; //商品规格
						var subtotal = num * price;
						isSeckill = $(this).closest(".shop-info").find("input[name='isSeckill']").val();
						seckillID = $(this).closest(".shop-info").find("input[name='seckillID']").val();
						_totalNum+=num;
						var parms = {
							goodsID: goodsID,
							number: num,
							standardID: standardID,
							subtotal: subtotal,
							goodsImg: goodsImg,
							goodsName: goodsName,
							standard: standard,
							shoopingCartID: shoopingCartID,
							price: price
						}
						goodsStandardList.push(parms);//得到所有勾选商品的数组
					}
				}
			}) 
			if (isEdit) {
				_shoopingCartIDStr = _shoopingCartIDStr.substring(0, _shoopingCartIDStr.length-1);
				delShoppingCart(1, _shoopingCartIDStr);
			} else {
				console.log(goodsStandardList);
				//把json数据存储起来 然后跳转到结算页面
				window.localStorage.setItem("goodsStandardList", JSON.stringify(goodsStandardList));
				parent.location.href = "submitOrder.html?userID="+ userID+"&totalPrice="+ $("#AllTotal").text()+"&totalNum="+_totalNum+'&merchantID='+merchantID+'&isSeckill='+isSeckill+'&seckillID='+seckillID;
			}
		});
		function delShoppingCart (type, _shoopingCartIDStr) {
			var url = base.url.delShoppingCart;
			var data = {
				userID: userID,
				shoopingCartID: _shoopingCartIDStr
			}
			base.postData(url,data,delShoppingCartSuccess.bind(null, type));
		}
		function delShoppingCartSuccess(type, data) {
			if (data.success) {
				mui.toast(data.msg);
				getShoppingCart();
//				if (type == 1) {
//					//批量删除商品
//					$(".shop-group-item").find(".goodsCheck").each(function(){
//						if ($(this).is(":checked")) { //如果该商品被选中
//							$(this).parent().parents("li").remove(); 
//							totalPrice();
//						}
//					})
//				} else { //单个删除商品
//					elementID.parents("li").remove();
//		    			totalPrice();
//				}
			} else {
				mui.toast(data.msg);
			}
		}
	    function getShoppingCartSuccess(data) {
	  		if (data.success) {
	  			var shoopingCartList = data.context.mySpecialList;
	  			var html = '';
  				for (var index in shoopingCartList) {
					html += getListItem(shoopingCartList[index], index);
				}
  				$(".shop-group-item ul").html(html);
	  			if (shoopingCartList.length == 0) {
	  				$(".shop-group-tips-div").show();
	  			}
	  		} else {
	  			mui.toast(data.msg);
	  		}
	    }
		//计算
		function totalPrice() {
		    var allprice = 0; //总价
		    var tempPrice = 0;
		      var oprice = 0; //商品总价
		       $(".shop-group-item").find(".goodsCheck").each(function() { //循环购物车里面的商品
		        if ($(this).is(":checked")) { //如果该商品被选中
		          var num = parseInt($(this).parents(".shop-info").find(".num").text()); //得到商品的数量
		          var price = parseFloat($(this).parents(".shop-info").find(".price").text()); //得到商品的单价
		          var total = price * num; //计算单个商品的总价
		          oprice += total; //计算该购物车的总价
		        }
		        tempPrice = oprice.toFixed(2);
		      });
		      allprice += parseFloat(tempPrice); //计算所有购物车的总价
	    		  $("#AllTotal").text(allprice.toFixed(2)); //输出全部总价
		  }
		$(".mui-pull-right").click(function() {
			isEdit = !isEdit; //true 表示编辑状态 false 表示结算状态
			if (isEdit) {
//				$(".collection-div").show();
				$(".shop-total").hide();
				$(".settlement").text("删除");
				$(".shop-pices").hide();
				$(".delete-div").show();
				$(".shop-info-text").css("margin-right", "45px");
			} else {
//				$(".collection-div").hide();
				$(".shop-total").show();
				$(".settlement").text("结算");
				$(".shop-pices").show();
				$(".delete-div").hide();
				$(".shop-info-text").css("margin-right", "0px");
			}
		});
		$(".shop-group-item").on('tap','.shop-info-img',function(){
			var goodsID = $(this).closest(".shop-info").find(".goods-ID").text();
			var merchantID = $(this).closest(".shop-li").find("input[name='merchantID']").val();
			parent.location.href = "goodsDetail.html?userID="+userID+'&goodsID='+goodsID+'&merchantID='+merchantID;
		});
		function getListItem(item,index) {
			var html = '';
			html += '<li class="shop-li" data-index="'+index+'">'
			html += '	<div class="shop-name">'
			html += '		<input type="hidden" name="merchantID" value="'+item.merchantID+'">'
//			html += '		<input type="checkbox" class="check goods-check shopCheck">'
			html += '		<h4><a href="#">'+item.merchantName+'</a></h4>'
			html += '	</div>'
			html += '	<ul class="goods-ul">'
			for (var goodsItem of item.shoopingCart) {
				if (goodsItem.isSeckill == 1 && goodsItem.number > goodsItem.seckillNum) {
					goodsItem.number = goodsItem.seckillNum;
				}
				html += '		<li>'
				html += '			<div class="shop-info">'
				html += '				<input type="hidden" name="isSeckill" value="'+goodsItem.isSeckill+'">'
				html += '				<input type="hidden" name="seckillID" value="'+goodsItem.seckillID+'">'
				html += '				<input type="hidden" name="seckillNum" value="'+goodsItem.seckillNum+'">'
//				html += '				<input type="checkbox" class="check goods-check goodsCheck">'
				html += '				<input type="radio" name="goodsRadio" class="check goods-check goodsCheck">'
				html += '				<div class="shop-info-img"><img src="'+ goodsItem.goodsImg +'" /></div>'
				html += '				<div class="shop-info-hide"><span class="standard-ID">'+ goodsItem.standardID +'</span><span class="goods-ID">'+goodsItem.goodsID+'</span></div>'
				html += '				<div class="shooping-cart-ID">' + goodsItem.shoopingCartID + '</div>'
				html += '				<div class="shop-info-text">'
				html += '					<div class="goods-name">'+ goodsItem.goodsName +'</div>'
				html += '					<div class="shop-brief"><span>已选描述：</span><span class="standard-span">'+ goodsItem.standard +'</span></div>'
				html += '					<div class="shop-price">'
				html += '						<div class="shop-pices">￥<span class="price">'+ goodsItem.price +'</span></div>'
				html += '						<div class="shop-arithmetic">'
				html += '							<div class="minus"></div>'
				html += '							<span class="num" >'+goodsItem.number+'</span>'
				html += '							<div class="plus"></div>'
				html += '						</div>'
				html += '					</div>'
				html += '				</div>'
				html += '				<div class="delete-div">删除</div>'
				html += '			</div>'
				html += '		</li>'
			}
			html += '	</ul>'
			html += '</li>'
			return html;
		}
		/**--------------以上为购物车功能-------------**/
		function getPushingGoods() { //小U推荐接口
			var url = base.url.pushingGoods;
			var data = {
				userID: userID
			}
			base.postData(url,data,getPushingGoodsDataSuccess);
		}
		function getPushingGoodsDataSuccess(data) {
			if (data.success) {
				var tempPushingList = data.context.pushingList||[];
				showMySpecialList(tempPushingList);
			} else {
				mui.toast(data.msg);
			}
		}
		function showMySpecialList(list) {
			var html = '';
			for (var i in list) {
				html += getMySpecialListItem(list[i], i);
			}
			$("#specialul").html(html);
		}
		function getMySpecialListItem(item, index) {
			var html = '';
			html += '<li class="mui-table-view-cell mui-media mui-col-xs-6" data-index="' + index + '">'
			html += '	<div class="mui-media-object">'
			html += '		<img class="special-image" src="'+item.goodsImg+'" />'
			html += '		<div class="special-info-div">'
			html += '			<div class="special-text">'+(item.goodsName.length>7?(item.goodsName.substring(0, 6)+'...'):item.goodsName)+'</div>'
			html += '			<div class="goods-ID-hide">'+item.goodsID+'</div>'
			html += '			<div class="merchant-ID-hide">'+item.merchantID+'</div>'
			html += '			<div class="special-collect-div">'
			html += '				<img class="collect-icon" src="../img/common/hot_icon.png" />'
			html += '				<span class="collect-span">'+item.popularity+'人</span>'
			html += '			</div>'
			html += '		</div>'
			html += '		<div class="special-info-div">'
			html += '			<div class="special-price">'+(item.price/100).toFixed(2)+'¥</div>'
			html += '			<div class="add-shopping-car-div"></div>'
			html += '		</div>'
			html += '	</div>'
			html += '</li>'
			return html;
		}
		$("#specialul").on("tap", ".mui-media-object", function() {//跳转到商品详情
			var _merchantID = $(this).find(".merchant-ID-hide").text();
			parent.location.href = "goodsDetail.html?userID="+userID+'&goodsID='+$(this).find(".goods-ID-hide").text()+"&merchantID="+_merchantID;
		})
		$(".common-back-div").on('tap','.common-back-img',function(){
			mui.back();
		});
	  </script>
</html>
